import React from 'react';
import {Card, Button, Radio} from 'antd';

export default class Buttons extends React.Component{
    constructor() {
        super();
        this.state = {
            Loading : true,
            size : 'default'
        }
    }
    handleCloseLoading = () => {
        this.setState({
            Loading:false
        })
    };
    handleChange = e => {
        this.setState({
            size: e.target.value
        })
    };

    render(){
        return (
            <div className="wrap">
                <Card title="基础按钮" bordered={false} bodyStyle={{padding:20}}>
                    <Button type="primary">按钮</Button>
                    <Button>按钮</Button>
                    <Button type="dashed">按钮</Button>
                    <Button type="danger">按钮</Button>
                    <Button disabled>按钮</Button>
                </Card>
                <Card title="图形按钮" bordered={false} style={{marginTop: 20}}>
                    <Button icon="plus">创建</Button>
                    <Button icon="edit">编辑</Button>
                    <Button icon="delete" type="dashed">删除</Button>
                    <Button shape="circle" icon="search"></Button>
                    <Button type="primary" icon="search" disabled>搜索</Button>
                    <Button type="primary" icon="download" disabled>下载</Button>

                </Card>
                <Card title="Loading按钮" bordered={false} style={{marginTop: 20}}>
                    <Button type="primary" loading={this.state.Loading}>确定</Button>
                    <Button type="primary" shape="circle" loading={true}></Button>
                    <Button loading={true}>点击加载</Button>
                    <Button loading={true} shape="circle"></Button>
                    <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
                </Card>
                <Card title="按钮组" bordered={false} style={{marginTop: 20}}>
                    <Button.Group>
                        <Button type="primary" icon="left" style={{marginRight:0}}>返回</Button>
                        <Button type="primary" icon="right">前进</Button>
                    </Button.Group>
                </Card>
                <Card title="按钮尺寸" bordered={false} style={{marginTop: 20}}>
                    <Radio.Group value={this.state.size} onChange={this.handleChange}>
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </Radio.Group>
                        <Button type="primary" size={this.state.size}>返回</Button>
                        <Button size={this.state.size}>前进</Button>
                        <Button type="dashed" size={this.state.size}>按钮</Button>
                        <Button type="danger" size={this.state.size}>按钮</Button>
                </Card>
            </div>
        )
    }
}
